<template>
  <div class="find-pwd" v-if="!getIsPhone">
    <div class="content box-shadow">
      <div class="logo">
        <img :src="logo" alt="">
      </div>
      <div class='form-group'>
        <div class="form-title border-bottom">
          找回密码
        </div>
        <input-item 
          @input="updateAccountName"
          :errorMsg="errorMsg"
          :type="'text'" 
          :title="'账号'" 
          :placeholder="'请输入账号'"
          ><div class="get-code" @click="vaildateAccount" v-show="accountName !== ''">验证账号</div>
        </input-item>
        <input-item 
          class="choose-question"
          :question="question"
          :type="'text'" 
          :title="'保密问题'" 
          :placeholder="'请选择保密问题'"
          >
          <span class="icon-choose" @click="chooseQuestions">
            <i class="iconfont iconacbar_tianjia"></i>
          </span>
          <ul 
            class="questions" 
            v-show="showQuestions"
           >
            <li 
              v-for="(item,index) in questionList" 
              :key="index"
              @click="updateQuestionPc(item.content)"
            >{{ item.content }}</li>
          </ul>
        </input-item>
        <input-item 
          :errorMsg="answerErr"
          :title="'保密答案'" 
          :placeholder="'请输入答案'"
          @input="updateAnswer"
          >
        </input-item>
      </div>
      <div class="btns">
        <submit-button 
          :name="'取消'"
          @click="handleCancel"
          >
        </submit-button>
        <submit-button :name="'找回'"
          :buttonState=" isActive ? 'selected' : 'disabled'"
          @click="handleFindBack"
        ></submit-button>
      </div>
    </div>
  </div>
  <div class="find-pwd-phone" v-else>
    <login-signup-template>
      <template v-slot:form>
        <div class='form-group'>
          <div class="form-title border-bottom">
            找回密码
          </div>
          <input-item 
            @input="updateAccountName"
            :errorMsg="errorMsg"
            :type="'text'" 
            :title="'账号'" 
            :placeholder="'请输入账号'"
            ><div class="get-code" @click="vaildateAccount" v-show="accountName !== ''">验证账号</div>
          </input-item>
          <input-item 
            class="choose-question"
            :question="question"
            :type="'text'" 
            :title="'保密问题'" 
            :placeholder="'请选择保密问题'"
            >
            <span class="icon-choose" @click="chooseQuestions">
              <i class="iconfont iconacbar_tianjia"></i>
            </span>
          </input-item>
          <input-item 
            :errorMsg="answerErr"
            :title="'保密答案'" 
            :placeholder="'请输入答案'"
            @input="updateAnswer"
            >
          </input-item>
        </div>
      </template>
      <template v-slot:submit>
        <submit-button 
          :name="'取消'"
          @click="handleCancel"
          >
        </submit-button>
        <submit-button :name="'找回'"
          :buttonState=" isActive ? 'selected' : 'disabled'"
          @click="handleFindBack"
        ></submit-button>
      </template>
    </login-signup-template>
    <bc-modal v-show="showQuestions">
      <slide-up-questions 
        :dataList="questionList"
        :show="showQuestions"
        @click="updateQuestion">
      </slide-up-questions>
    </bc-modal>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import logo from "@/assets/imgs/logo.png"
import LoginSignupTemplate from './components/login-signup-template'
import InputItem from './components/input-item'
import SubmitButton from './components/submit-button'
import LoginBottom from './components/login-bottom'
import BcModal from '@/components/base/bc-modal/bc-modal'
import SlideUpQuestions from '@/components/slide-up-questions/slide-up-questions'
export default {
  components: {
    InputItem,
    SubmitButton,
    LoginBottom,
    LoginSignupTemplate,
    SlideUpQuestions,
    BcModal
  },
  data() {
    return {
      logo: logo,
      isAccountValid: false,
      accountName: '',
      question: '',
      answer: '',
      errorMsg: '',
      answerErr: '',
      showQuestions: false,
      questionList: [
        {
          id: 1,
          content: '我的出生地?'
        },
        {
          id: 2,
          content: '我的宠物的名字?'
        },
        {
          id: 3,
          content: '我最爱的人的名字?'
        },
        {
          id: 4,
          content: '我第一次去的最远的城市的名字?'
        },
        {
          id: 5,
          content: '我现在工作的城市名字?'
        },
        {
          id: 6,
          content: '我的第一辆车什么品牌?'
        },
        {
          id: 7,
          content: '我最喜欢吃的食物?'
        }
      ]
    }
  },
  methods: {
    updateAccountName(accountName) {
      this.accountName = accountName
      this.errorMsg = ''
      this.isAccountValid = false
    },
    updateQuestion(question) {
      this.question = question
      this.showQuestions = false
    },
    updateQuestionPc(question) {
      this.question = question
      this.showQuestions = false
    },
    updateAnswer(answer) {
      this.answer = answer
      this.errorMsg = ''
    },
    vaildateAccount() {
      setTimeout(() => {
        this.isAccountValid = true
      }, 500)
    },
    chooseQuestions() {
      this.showQuestions = true
    },
    handleFindBack() {
      let signUpInfo = {
        accountName: this.accountName,
        question: this.question,
        answer: this.answer
      }
      setTimeout(() => {
        this.errorMsg = '用户名已存在'
        this.answerErr = '答案错误'
      }, 1000)
    },
    handleCancel() {
      this.$router.go(-1)
    }
    
  },
  computed:{
    ...mapGetters('lottery', ['getIsPhone', 'getUserInfo']),
    isActive() {
      return this.question !== '' && this.answer !== '' && this.isAccountValid && this.errorMsg == '' 
    }
  },
  watch:{

  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
   @media screen and (min-width 750px)
    .find-pwd  
      .content
        width 400px  
        position absolute 
        left 50%
        top 50%
        transform translate(-50%, -50%)
        box-sizing border-box 
        padding 20px 
        background $color-text-button
        border-radius 5px 
        border 1px solid $color-divide-line
        .logo 
          width 250px 
          height 80px 
          position absolute 
          top -110px 
          left 50% 
          transform translateX(-50%)
          img 
            width 100%
        .form-group 
          .form-title 
            font-size 24px 
            font-weight 700
            text-align center
            line-height 80px
          .get-code 
            margin-left 10px
          .choose-question >>> .icon 
            display none !important
          .choose-question  
            position relative 
            
          .icon-choose 
            width 16px 
            height 16px 
            border-radius 50% 
            background-color #cccdd0 
            display flex 
            align-items center 
            justify-content center
            font-size 14px
            color #fff
          .questions
            position absolute;
            top 55px;
            left 0;
            list-style none;
            width 360px;
            height 284px;
            background-color #fff;
            border 1px solid #dbd3d3;
            z-index 99;
            overflow auto;
            color $color-theme-dark
            li
              margin-top 18px;
              z-index 99;
              width 356px;
              text-align center;
              font-size 14px;
              // margin-top 28px;
              margin-bottom 24px;
              &:hover
                color red;
                cursor pointer;
        .btns 
          margin-top 50px
  @media screen and (max-width 750px) 
    .find-pwd-phone
      box-sizing border-box 
    .find-pwd-phone >>>.form 
      margin-top 20px
    .find-pwd-phone >>>.submit
      margin-top 20px
    .find-pwd-phone >>> .hint
      height 0 !important
    .form-group 
      .form-title 
        line-height 48px 
        text-align center
      .get-code 
        margin-left 10px
      .choose-question >>> .icon 
        display none !important
      .icon-choose 
        width 16px 
        height 16px 
        border-radius 50% 
        background-color #cccdd0 
        display flex 
        align-items center 
        justify-content center
        .iconfont 
          color #fff 
          font-size 12px

    
    
    
       

</style>